<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      title="新增/编辑评定项目"
      align="center"
      :visible.sync="innerDialogFormVisible"
      @closed="cancel"
    >
      <el-form
        ref="formData"
        label-width="100px"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="项目类型"
              :label-width="formLabelWidth"
              prop="itemType"
              :error="errorMsg.itemType"
            >
              <el-input
                v-model="formData.itemType"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="排序"
              :label-width="formLabelWidth"
              placeholder="请输入1~99数字，按顺序排序"
              prop="sort"
              :error="errorMsg.sort"
            >
              <el-input
                v-model="formData.sort"
                autocomplete="off"
                @input="handleInput('sort')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="分数上限"
              :label-width="formLabelWidth"
              prop="scoreLine"
              :error="errorMsg.scoreLine"
            >
              <el-input
                v-model="formData.scoreLine"
                autocomplete="off"
                @input="handleInput('scoreLine')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="备注"
          :label-width="formLabelWidth"
          :error="errorMsg.remark"
        >
          <el-input v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="评分标准"
          :label-width="formLabelWidth"
          prop="evaluationStandardList"
        >
          <el-table
            :data="formData.evaluationStandardList"
            element-loading-text="Loading"
            fit
            align="center"
            border
            highlight-current-row
          >
            <el-table-column label="排序" width="100px" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="内容" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.content"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150px" align="center">
              <template slot-scope="scope">
                <div class="base-table-operation">
                  <el-link
                    v-if="
                      formData.evaluationStandardList.length != 1 &&
                      scope.$index != 0
                    "
                    size="mini"
                    type="primary"
                    style="margin-right: 10px"
                    @click="moveUp(scope.$index)"
                    >上移</el-link
                  >
                  <el-link
                    v-if="
                      formData.evaluationStandardList.length != 1 &&
                      scope.$index + 1 != formData.evaluationStandardList.length
                    "
                    size="mini"
                    type="primary"
                    style="margin-right: 10px"
                    @click="moveDown(scope.$index)"
                    >下移</el-link
                  >
                  <el-link
                    v-if="formData.evaluationStandardList.length != 1"
                    size="mini"
                    type="danger"
                    style="margin-right: 10px"
                    @click="handleDelete(scope.$index)"
                    >删除</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-link size="mini" type="primary" @click="addStandard()"
            >+添加评分标准</el-link
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')"
          >保 存</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  create,
  update,
  getData,
} from "../../../api/Evaluation/EvaluationItem.js";

export default {
  name: "EvaluationItemEdit",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      initData: {
        id: 0,
        itemType: "",
        sort: 0,
        scoreLine: 0,
        remark: "",
      },
      formData: {
        id: 0,
        itemType: "",
        sort: 0,
        scoreLine: 0,
        remark: "",
        evaluationStandardList: [],
      },
      formDataRules: {
        itemType: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        sort: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        scoreLine: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        evaluationStandardList: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        itemType: "",
        sort: "",
        scoreLine: "",
        remark: "",
      },
      errorMsg: {
        itemType: "",
        sort: "",
        scoreLine: "",
        remark: "",
      },
    };
  },
  watch: {
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    if (this.id) {
      this.init();
    }
  },
  methods: {
    init() {
      getData({ id: this.id }).then((res) => {
        this.formData = res.data;
      });
    },
    // 删除
    handleDelete(index) {
      this.formData.evaluationStandardList.splice(index, 1);
    },
    // 下移
    moveDown(index) {
      if (index < this.formData.evaluationStandardList.length - 1) {
        const temp = this.formData.evaluationStandardList[index];
        this.formData.evaluationStandardList.splice(index, 1);
        this.formData.evaluationStandardList.splice(index + 1, 0, temp);
      }
    },
    // 上移
    moveUp(index) {
      if (index > 0) {
        const temp = this.formData.evaluationStandardList[index];
        this.formData.evaluationStandardList.splice(index, 1);
        this.formData.evaluationStandardList.splice(index - 1, 0, temp);
      }
    },
    // 添加标准
    addStandard() {
      this.formData.evaluationStandardList.push({
        sort: 0,
        content: "",
      });
    },
    cancel() {
      this.$emit("close");
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
    onSubmit() {
      for (
        let i = 0;
        i < this.formData.evaluationStandardList.length - 1;
        i++
      ) {
        if (!this.formData.evaluationStandardList[i].content) {
          this.$message.warning("内容不能为空");
          return false;
        }
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
          if (this.formData.id <= 0) {
            create(this.formData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            update(this.formData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("itemType", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("sort", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("scoreLine", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("remark", this.errorMsg, res.msg);
      }
    },
    handleInput(val) {
      if (val === "sort") {
        const reg = /^[1-9]\d?$|^99$/; // 匹配1-99的数字
        if (!reg.test(this.formData.sort)) {
          this.formData.sort = "";
          this.errorMsg.sort = "请输入1-99的数字"; // 输入不符合规则，给出提示
        } else {
          this.errorMsg.sort = ""; // 输入符合规则，清空提示
        }
      } else if (val === "scoreLine") {
        const reg = /^[1-9]\d*$/; // 匹配大于0的数字
        if (!reg.test(this.formData.scoreLine)) {
          this.formData.scoreLine = "";
          this.errorMsg.scoreLine = "请输入大于0的数字"; // 输入不符合规则，给出提示
        } else {
          this.errorMsg.scoreLine = ""; // 输入符合规则，清空提示
        }
      }
    },
  },
};
</script>
